<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
        <template #create_user="{ value, input }">
          <VCascader
            :model-value="value"
            @update:model-value="input"
            collapse-tags
            class="w-[200px]"
            placeholder="创建人"
          />
        </template>
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
  </VTable>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { logisticsManageAuthList } from "@/Auth/logistics-manage.js";
import XForm from "@/components/XForm/index.vue";
import { backupList } from "../../api/index.js";
import { getTableSelectRow } from "@/hooks/tool.js";
import DerivedCenter from "@/components/DerivedCenter";
import { config_name } from "@/config/export.js";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      logistics_id: "",
      channel_id: [],
      destination_country: "",
      dateRange: { type: "delivery_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    { fixed: "left", width: 170, title: "发货时间", field: "delivery_time" },
    {
      fixed: "left",
      title: "物流商",
      minWidth: 160,
      field: "logistics_id_text",
    },
    { title: "渠道", minWidth: 160, field: "channel_id_text" },
    { title: "国家", width: 140, field: "destination_country" },
    { title: "票数", width: 160, field: "vote_num" },
    { title: "重量(KG)", minWidth: 160, field: "billing_weight" },
    { title: "运费(CNY)", minWidth: 160, field: "freight" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return backupList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "logistics_id",
    type: "select",
    originOption: "logistics",
    options: {
      placeholder: "物流商名称",
      labelKey: "logistics_name",
      valueKey: "id",
    },
    ...publicStyle,
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
  },
  {
    field: "channel_id",
    type: "select",
    originOption: "channel",
    options: {
      placeholder: "渠道",
      labelKey: "channel_name",
      valueKey: "id",
    },
  },
  {
    field: "destination_country",
    type: "select",
    originOption: "country",
    multiple: true,
    options: {
      placeholder: "国家",
    },
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    select: [{ label: "发货时间", value: "delivery_time" }],
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];
//导出中心
const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value?.open({
    tag_name: config_name["logistics_manage"]["statistic_initial"],
    condition,
  });
};
const actions = [
  {
    label: "导出",
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [logisticsManageAuthList.logistics_statistic.export],
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
